<template>
	<view class="content" :style="{'padding-top':top+'px','min-height':windowheight+'px'}">
		<Navbar title="我的积分" bgColor="#da708b" :backIcon="false" style="color: #ffffff;z-index: 1;"></Navbar>
		<view class="my_points">
			<view class="mpo_info">
				<text class="mpoi_tit">可用积分</text>
				<text class="mpoi_con">{{mypoints}}</text>
				<text class="mpoi_rule" @tap.stop="open_rule">积分规则</text>
			</view>
			<view class="mpo_btn">
				<button class="mpob_btn" type="default" size="mini" @tap.stop="toexchange">去兑换</button>
			</view>
		</view>
		<view class="points_list">
			<view class="points_topic">
				<view v-for="(item,index) in tabs" :key="index" :class="currentTab==index?'points_topic_act':''" @tap.stop="changeTab(index)">{{item.name}}</view>
			</view>
			<scroll-view class="points_con">
				<view v-for="(item,index) in pointLists" :key="index" class="pointsl_item">
					<view class="pls_n_icon">
						<view class="plsnico_bg">
							<image :src="item.pointSourceIcon"></image>
						</view>				
					</view>
					<view class="pls_n_t">
						<text class="plsnt_tit">{{item.pointSourceName}}</text>
						<uni-dateformat :date="item.createdTime" format="yyyy/MM/dd hh:mm:ss" class="plsnt_time"></uni-dateformat>
					</view>
					<view class="pls_num" :class="item.incomeExpenditureStatus==='INCOME'?'pls_num_act':''">{{item.incomeExpenditureStatus==='INCOME'?'+'+item.points:"-"+item.points}}</view>
				</view>
			</scroll-view>
		</view>
		<uni-popup type="message" ref="pop_pointRule" background-color="#fff">
			<view class="pointrule_msg">
				<view class="prmsg_tit">积分规则</view>
				<view class="prmsg_con">
					<ol>
						<li>客户每消费一元即可获取1个积分奖励</li>
						<li>客户每日签到可获取一定积分奖励</li>
						<li>客户抽取盲盒可随机获取一定积分奖励</li>
						<li>积分可用于兑换优惠券等虚拟物品，兑换后扣除相应的积分</li>
					</ol>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup>
	import { computed, nextTick,ref,onMounted } from 'vue'
	import {
		onShow,
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	const baseUrl = getApp().globalData.baseUrl
	const title=ref('Hello')
	const windowheight=ref()
	const platform = ref()
	const statusBar = ref()
	const customBar = ref()
	const top = ref()
	const mypoints=ref(0)
	const client_no = ref(JSON.parse(uni.getStorageSync("user_info")).client_no)
	const iconArr=[
		{id:1,bgcolor:"#2989ff",ficon:"cart"},
		{id:2,bgcolor:"#ff990b",ficon:"compose"},
		{id:3,bgcolor:"#e64c73",ficon:"gift"},
		{id:99,bgcolor:"#008f00",ficon:"loop"},
	]
	const tabs=ref([
	    {id:1,name:"积分明细"},
	    {id:2,name:"兑换记录"},
	])
	const pointData=ref([
		{id:1,cid:99,name:"积分兑换",nums:-60,occurTime:"2021-12-13 13:25:35"},
		{id:2,cid:2,name:"签到奖励",nums:+60,occurTime:"2021-12-13 13:25:35"},
		{id:3,cid:1,name:"完成订单",nums:+60,occurTime:"2021-12-13 13:25:35"},
		{id:4,cid:1,name:"完成订单",nums:+60,occurTime:"2021-12-13 13:25:35"},
		{id:5,cid:3,name:"盲盒奖励",nums:+60,occurTime:"2021-12-13 13:25:35"}
	])
	const pointLists=ref([])
	const currentTab=ref(0)
	const pop_pointRule=ref(null)
	
	const toexchange=()=>{
		uni.navigateTo({
			url:"/pages/pointredeem/pointredeem"			
		})
	}
	const getColumnHeight=()=>{
		uni.getSystemInfo({
			success(res) {
				console.log(res)
				platform.value = res.platform
				windowheight.value=res.screenHeight
				// #ifdef MP-WEIXIN
				statusBar.value = res.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar.value = custom.bottom + custom.top - res.statusBarHeight
				// #endif
				// #ifdef APP-PLUS
				statusBar.value = res.statusBarHeight
				customBar.value = res.statusBarHeight + 45
				// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
				if (res.platform == "android") {
					statusBar.value += 3
					customBar.value += 3
				}
				// #endif
			}
		})
		top.value = customBar.value
		windowheight.value=windowheight.value-top.value
		//console.log(statusBar.value, customBar.value, top.value,windowheight.value)
	}
	onShow(()=>{
		const now = new Date().getTime()
		currentTab.value=0
		if (!uni.getStorageSync('token') || now > uni.getStorageSync('expireTime')) {
			uni.reLaunch({
				url: "/pages/login/login"
			})
		}else{
			uni.request({
				url:getApp().globalData.baseUrl+"/point/Record/list",
				method:"POST",
				header: {
					'content-type': 'application/json',
					'Access-Control-Allow-Origin': "*",
					'Authorization': uni.getStorageSync('token')
				},
				data:{
					clientNo:client_no.value
				},
				success:(res)=>{
					console.log(res)
					pointData.value=res.data.value
					pointLists.value=pointData.value
				},
				fail:(err)=>{
					console.log(err)
				}
			})
			uni.request({
				url: getApp().globalData.baseUrl + "/getinfo",
				method: "GET",
				header: {
					'content-type': 'application/json',
					'Access-Control-Allow-Origin': "*",
					'Authorization': uni.getStorageSync('token')
				},
				data: {
					openId: JSON.parse(uni.getStorageSync("user_info")).openId
				},
				success: (res) => {
					console.log(res)
					mypoints.value = res.data.value.clientPoints
				},
				fail: (err) => {
					console.log(err)
				}
			})
		}
	})
	onMounted(()=>{
		getColumnHeight()
	})
	const open_rule=()=>{
		pop_pointRule.value.open("center");
	}
	const pop_close=()=>{
		pop_pointRule.value.close();
	}
	
	async function changeTab(index){
		if(index===currentTab.value) return
		await nextTick(()=>{
			currentTab.value=index;
			if(index==1){
				pointLists.value=pointData.value.filter(item=>item.incomeExpenditureStatus==="EXPENSES");
			}else{
				pointLists.value=pointData.value;
			}
		})	    
	}
	const iconinfo=computed(()=>(cid)=>{
		return iconArr.filter(item=>item.id==cid);
	})
</script>
<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		//background-image: linear-gradient(to bottom,#d95e7d,#ffffff);
	}
	.my_points{
		display: flex;
		background: url("http://zzqjt.oss-cn-hangzhou.aliyuncs.com/templates/client/res/b603ceb007cf42938e722d8cd2edbd8f-my-bg.png");
		background-size: 100%;
		background-origin: border-box;
		width: 100%;
		padding-top: 60rpx;
		height: 220rpx;	
	}
	.mpo_info{
		display: flex;
		flex-direction: column;
		width: 60%;
		margin-left:51rpx;
		color: #fff;
		font-size: 26rpx;
	}
	.mpoi_tit{
		line-height: 50rpx;
	}
	.mpoi_con{
		font-size: 64rpx;
		font-weight: bold;
	}
	.mpoi_rule{	
		margin-top:32rpx;
	}
	.mpo_btn{
		margin: 120rpx 32rpx 0 0;
		text-align: right;
		width: 39%;
	}
	.mpob_btn{
		background-color: #ffaa7f !important;
		border-radius: 96rpx;
		color: #fff !important;
	}
	.points_list{
		background-color: #fff;
		width: 95%;	
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		
	}
	.points_topic{
		display: flex;	
		margin-top:20rpx;
		justify-content: space-around;
		line-height: 58rpx;
		border-bottom:4rpx solid #eee;
	}
	.points_topic_act{
		border-bottom:4rpx solid #e77c90;
	}
	.points_con{
		/* margin-top:0.8rem; */
	}
	.pointsl_item{	
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #eee;
		align-items: center;	
		margin-top: 10rpx;
	}
	.pls_n_t{
		display: flex;
		flex-direction: column;
		line-height: 40rpx;
		width: 70%;
	}
	.pls_n_icon{
		width: 90rpx;		
		height: 90rpx;		
	}
	.plsnico_bg{
		display: flex;
		justify-content: center;
		align-items: center;
		width:80%;
		height: 80%;
		border-radius: 50%;
		overflow: hidden;
		/*background-color: #8388fe;*/
		margin-top: 6rpx;
		image{
			height: 100%;
			width: 100%;
		}
	}
	.plsnt_tit{
		font-size:28rpx;
		font-weight: 600;
	}
	.plsnt_time{
		font-size: 22rpx;
		color:#ccc;
	}
	.pls_num{
		color: #999;
		font-size: 32rpx;
		font-weight: bold;
		width: 80rpx;
	}
	.pls_num_act{
		color: red;
		width: 80rpx;
	}
	
	.pointrule_msg{
		background-color: #fff;
		border-radius: 10rpx;
		padding: 16rpx;
		line-height: 50rpx;
	}
	.prmsg_tit{
		text-align: center;
		font-weight: 500;
	}
	.prmsg_con{
		font-size: 28rpx;
	}
</style>